import './Calculator1.css';
import React from 'react';
import {Button, Input, Row, Col} from 'antd';
import {computeHeadingLevel} from "@testing-library/react";

class Calculator1 extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            inputValue:"",
            history: "",
        }
    }

    handleCalculate=(e)=>{
        let str = this.state.inputValue;
        let sourceArr = str.split(" ");
        let destArr = [];
        for(let i=0;i<sourceArr.length;i++){
            let item=sourceArr[i];
            let firstNumber;
            let secondNumber;
            let res;
            switch (item){
                case "+":
                case "=":
                    break;
                case "-":
                    res=-1*sourceArr[i+1];
                    destArr.push(res);
                    i++;
                    break;
                case "*":
                    firstNumber=destArr.pop();
                    secondNumber=sourceArr[i+1];
                    res=firstNumber * secondNumber;
                    i++;
                    destArr.push(res);
                    break;
                case "/":
                    firstNumber=destArr.pop();
                    secondNumber=sourceArr[i+1];
                    res=firstNumber / secondNumber;
                    i++;
                    destArr.push(res);
                    break;
                case "%":
                    firstNumber=destArr.pop();
                    secondNumber=sourceArr[i+1];
                    res=firstNumber % secondNumber;
                    i++;
                    destArr.push(res);
                    break;
                default:
                    destArr.push(item);
            }
        }
        let result = 0;
        for(let i=0; i<destArr.length; i++){
            result += eval(destArr[i]);
        }
        this.setState({
            inputValue: result
        })
    }

    handleBtnClick = (e) => {
        let suffix = "";
        switch (e.target.innerText) {
            case "+":
            case "-":
            case "*":
            case "/":
            case "%":
                suffix = " " + e.target.innerText + " ";
                break;
            case "=":
                let arr = this.state.inputValue.split(" ");
                console.log(arr)
                break;
            default:
                suffix = e.target.innerText;
        }
        let now = this.state.inputValue + suffix;
        this.setState({
            inputValue:this.state.inputValue + suffix ,
            history:now,
        })
    }

    handleBtnClickBack=(e)=>{
        let nowValue=this.state.inputValue
        let back =this.state.inputValue.length-1
        let backValue=nowValue.substring(0,back)
        this.setState({
            inputValue:backValue
        })
    }

    handleBtnClickAC=(e)=>{
        this.setState({
            inputValue:"",
        })
    }

    handleBtnClickHistory=(e)=>{
        let old = this.state.history
        this.setState({
            inputValue:old,
        })
    }

    render() {
        return (
            <div className="Div_Main">
                <Row >
                    <Col xs={4} sm={2} md={4} lg={4} xl ={4}></Col>
                    <Col xs={16} sm={16} md={16} lg={16} xl ={16}>
                        <div id="Div_Cal">
                            <div id = "Id_Input">
                                <input value={this.state.inputValue}  className={"RowInput"} />
                            </div>

                            <div id={"row1"}>
                                <Button className="ACBack" type="default" onClick={this.handleBtnClickAC}>AC</Button>
                                <Button className="ACBack" onClick={this.handleBtnClickBack} >Back</Button>
                                <Button className="ACBack" onClick={this.handleBtnClick} >%</Button>
                                <Button className="Btn_Arithmetic" onClick={this.handleBtnClick} >/</Button>
                            </div>

                            <div id={"row2"}>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>1</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>2</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>3</Button>
                                <Button className="Btn_Arithmetic" onClick={this.handleBtnClick}>*</Button>
                            </div>

                            <div id={"row3"}>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>4</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>5</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>6</Button>
                                <Button className="Btn_Arithmetic" onClick={this.handleBtnClick}>+</Button>
                            </div>

                            <div id={"row4"}>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>7</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>8</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>9</Button>
                                <Button className="Btn_Arithmetic" onClick={this.handleBtnClick}>-</Button>
                            </div>

                            <div id={"row5"}>
                                <Button className="Btn_Num0" onClick={this.handleBtnClick}>0</Button>
                                <Button className="Btn_Num" onClick={this.handleBtnClick}>.</Button>
                                <Button className="Btn_Arithmetic" onClick={this.handleCalculate}>=</Button>
                            </div>

                            <div id={"row6"}>
                                <Button className = "History" onClick={this.handleBtnClickHistory}>History</Button>
                            </div>
                        </div>
                    </Col>
                    <Col xs={4} sm={2} md={4} lg={4} xl ={4}></Col>
                </Row>
            </div>
        )
    }
}

export default Calculator1;